<script lang="tsx">
import { defineComponent, onMounted, reactive, ref, Transition, onUnmounted, onActivated, watch, h } from "vue";
import CardItem from "@/components/cardItem";

import { Model } from 'survey-core';

import { SurveyComponent } from 'survey-vue3-ui';

import request from '@/utils/api';

export default defineComponent({
    name: "fillList",
    components: {
        CardItem
    },
    setup(_, { }) {

        const surveyJson = {
            elements: [{
                name: "FirstName",
                title: "Enter your first name:",
                type: "text"
            }, {
                name: "LastName",
                title: "Enter your last name:",
                type: "text"
            }]
        };
        const survey = new Model(surveyJson);


        const card_1 = ref([]);

        const card_2 = ref([])

        const card_3 = [
            { status: 1, day: 10, title: '某论坛活动方案征集', time: '活动日期：2024-12月-20日 — 2024年12月31日', c1: 4, c2: true, c3: true, c4: 1 },
        ]


        const initData = async () => {
            let resp = await request.get('/admin-api/mdm/event/page');
            resp.data.list.forEach(r => {
                if(r.status == 1){
                    card_1.value.push(r)
                }else if(r.status == 2){
                    card_2.value.push(r)
                }
            })
        }

        initData()

        // 返回渲染函数
        return () => (
            <>
                {/* survey 用例 */}
                {/* <SurveyComponent model={survey} /> */}

                <div class='w-[960px] m-auto mt-[36px]'>
                    <h2 class='text-(20px #000) mb-[20px] self-start'>当前活跃活动（{card_1.value.length}个）</h2>
                    {
                        card_1.value.map(r => <CardItem currentItem={r}></CardItem>)
                    }


                    <h2 class='text-(20px #000) mb-[20px] self-start'>已过期活动（{card_2.value.length}个）</h2>
                    {
                        card_2.value.map(r => <CardItem currentItem={r}></CardItem>)
                    }

                </div>
            </>
        )
    }
})

</script>